<template>
  <div class="bucket-mgr">
    <div class="bucket-mgr__item" v-for="(item, index) in list">
      <div class="bucket-mgr__item__num">订单号：{{item.id}}</div>
      <div class="bucket-mgr__item__row">
        <div class="bucket-mgr__item__row__el bucket-mgr__item__row__el_tit">下单时间：</div>
        <div class="bucket-mgr__item__row__el bucket-mgr__item__row__el_info">{{item.time}}</div>
      </div>
      <div class="bucket-mgr__item__row">
        <div class="bucket-mgr__item__row__el bucket-mgr__item__row__el_tit">欠桶数：</div>
        <div class="bucket-mgr__item__row__el bucket-mgr__item__row__el_info">{{getBucketNum(item)}}</div>
      </div>
      <div class="bucket-mgr__back" v-if="item.backList && item.backList.length !== 0">
        <div class="bucket-mgr__back__item">
          <div class="bucket-mgr__back__item__el bucket-mgr__back__item__el_tit">还桶列表：</div>
        </div>
        <div class="bucket-mgr__back__item" v-for="el in item.backList">
          <div class="bucket-mgr__back__item__el bucket-mgr__back__item__el_name">{{el.bucketName}}</div>
          <div class="bucket-mgr__back__item__el">x{{el.num}}</div>
          <div class="bucket-mgr__back__item__el">{{el.bucketPrice}}元</div>
        </div>
      </div>
      <div class="bucket-mgr__item__row bucket-mgr__item__row_control">
        <div class="bucket-mgr__item__row__choose" @click="showChooseBucket(item, index)">
          <van-icon name="cash-back-record"></van-icon>
          <div class="bucket-mgr__item__row__choose__text">选择还桶</div>
        </div>
        <van-button type="default" size="small" @click="goDetail(item)">详情</van-button>
        &nbsp;
      </div>
      <transition name="fold">
        <div class="bucket-container" v-show="item.show">
          <bucket-back-choose @cancel="bucketCancel" @confirm="bucketConfirm" :bucketList="item.bucketDebtList"></bucket-back-choose>
        </div>
      </transition>
    </div>
    <div class="picker-mask" v-show="bucketChooseShow"></div>
    <van-button class="bottom-btn" type="info" @click="backBucket" :disabled="canBackBucket">{{btnText}}</van-button>
  </div>
</template>

<script>
  import BucketBackChoose from '@/components/BucketBackChoose'
  import {
    BUCKET_LOSS_LIST,
    REPAY_BUCKET
  } from '@/api/user';
  import {
    mapState
  } from 'vuex'
import { parse } from 'path';
  export default {
    computed: {
      ...mapState(['stationInfo']),
      //是否可以提交
      canBackBucket(){
        let flag = true;
        this.list.forEach(el => {
          if(el.backList && el.backList.length !== 0){
            flag = false;
          }
        });
        return flag;
      },
      //还桶按钮提示
      btnText(){
        let text = '一键还桶';
        let count = 0;
        this.list.forEach(el => {
          if(el.backList && el.backList.length !== 0){
            el.backList.forEach(item => {
              count += item.num * item.bucketPrice;
            });
          }
        });
        if(count !== 0){
          count = count.toFixed(2);
          text += `（已选${count}元）`;
        }
        return text;
      },
      
    },
    components: {
      BucketBackChoose
    },
    data() {
      return {
        list: [],
        bucketChooseShow: false,
        chooseIndex: 0,
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      //去详情
      goDetail(item) {
        this.$router.push({
          path: 'bucketManagementDetail',
          query: {
            item: item,
            type: 'debt'
          }
        })
      },
      getBucketNum(item){
        let count = 0
        item.bucketDebtList.forEach(el => {
          count += el.num;
        });
        return count;
      },
      //获取列表
      getList() {
        this.$reqPost(BUCKET_LOSS_LIST, {
          stationId: this.stationInfo.id
        }).then(res => {
          res.rows.forEach(element => {
            element.show = false;
            element.backList = [];
          });
          this.list = res.rows;

          if(this.list.length == 0){
            this.$toast('暂无数据')
          }
        });
      },
      //确认选择还桶
      bucketCancel(){
        this.bucketChooseShow = false;
        this.list[this.chooseIndex].show = false;
      },
      //确认还桶
      bucketConfirm(res){
        this.bucketChooseShow = false;
        this.list[this.chooseIndex].show = false;
        let list = [];
        res.forEach(el => {
          if(el.checked && el.num !== 0){
            list.push(el);
          }
        });
        this.list[this.chooseIndex].backList = list;
      },
      //选择还桶
      showChooseBucket(item, index){
        this.chooseIndex = index;
        item.show = true;
        this.bucketChooseShow = true;
      },
      //一键还桶
      backBucket(){
        let param = [];
        this.list.forEach(el => {
          if(el.backList.length !== 0){
            let obj = {
              status: 0,
              stationId: el.stationId,
              orderId: el.id,
              bucketList: []
            }
            el.backList.forEach(item => {
              obj.bucketList.push({
                bucketId: item.bucketId,
                num: item.num,
                sum: item.bucketPrice,
                orderId: el.id,
                stationId: el.stationId
              })
            });
            param.push(obj)
          }
        });
        this.$reqPost(REPAY_BUCKET, param).then(res => {
          if(res.data == 1){
            this.$toast('还桶成功');
            this.getList();
          }else{
            this.$toast('还桶失败');
          }
        });
      }
    },
    watch: {
      list: {
        handler(){

        },
        deep: true
      }
    }
  }

</script>
<style lang="less" scoped>
.bucket-container{
  position: fixed;
  left: 0;
  top: 40%;
  bottom: 0;
  z-index: 101;
  width: 100%;
  overflow: auto;
  background: #fff;
}
</style>


